<%@ page pageEncoding="UTF-8" contentType="text/html; UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
	<head>
		<title>商品详情</title>
		<meta charset="UTF-8"/>
    <link rel="stylesheet" href="../css/bootstrap-4.6.0-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">

	</head>
	<body>
	<%--导航栏--%>
	<%@include file="../resources/nav.jsp"%>
		<div class="container-fluid" style="margin-top: 100px;">
			<!-- 看板 -->
			<div class="row">
				<div class="col-md-1"></div>
				<div class="col-md-10">
					<div class="card">
						<div class="card-header bg-light">
							商品: ${requestScope.pro.name}
						</div>
						<div class="card-body">
							<div class="row">
								<div class="col-md-8">
									<table class="table table-condensed">
										<tr>
											<td style="width: 100px;">名称</td>
											<td>${requestScope.pro.name}</td>
										</tr>
										<tr>
											<td>价格</td>
											<td>￥ ${requestScope.pro.price}</td>
										</tr>
										<tr>
											<td>库存</td>
											<td>${requestScope.pro.sum} 件</td>
										</tr>
										<tr>
											<td>状态</td>
											<td>
												<c:choose>
													<c:when test="${requestScope.pro.status == 0}">
														<span class="badge badge-warning ">下架</span>
													</c:when>
													<c:otherwise>
														<span class="badge badge-success">上架</span>
													</c:otherwise>
												</c:choose>
											</td>
										</tr>
										<tr>
											<td>入库时间</td>
											<td><fmt:formatDate value="${requestScope.pro.addDate}" pattern="yyyy-MM-dd"/></td>
										</tr>
										<tr>
											<td>商品描述</td>
											<td>${requestScope.pro.info}</td>
										</tr>
										<tr>
											<td>商品图片</td>
											<td><img src="${requestScope.pro.imageUrl}" width="150px" height="150px" /></td>
										</tr>
									</table>
								</div>
							</div>
							<!--div class="row">
								<div class="col-md-12">
	<p class="text-justify lead">
	${requestScope.pro.info}
	</p>
								</div>
							</div-->
						</div>
						<div class="card-footer">
							<a href="#" class="btn btn-success btn-sm" onclick="history.go(-1)"><i class="fa fa-history"></i> 返回</a>
<%--							<a href="#" class="btn btn-success btn-sm offset-10"><i class="fa fa-star-o"></i> 加入秒杀</a>--%>
						</div>
					</div>
				</div>
				<div class="col-md-1"></div>
			</div>
		</div>
		<!-- 引入百度Echarts -->
		<script src="../js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/* 折线图 */
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('lineChart'));
		
			// 指定图表的配置项和数据
			option = {
				title: {
					text: ''
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: '#6a7985'
						}
					}
				},
				legend: {
					data: ['销售量', '访问量']
				},
				toolbox: {
					feature: {
						saveAsImage: {}
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [{
					type: 'category',
					boundaryGap: false,
					data: ['1月', '2月', '3月', '4月', '5月', '6月']
				}],
				yAxis: [{
					type: 'value'
				}],
				series: [
		
					{
						name: '销售量',
						type: 'line',
						stack: '总量',
						areaStyle: {
							normal: {}
						},
						data: [320, 332, 301, 334, 390, 330]
					},
					{
						name: '访问量',
						type: 'line',
						stack: '总量',
						label: {
							normal: {
								show: true,
								position: 'top'
							}
						},
						areaStyle: {
							normal: {}
						},
						data: [820, 932, 901, 934, 1290, 1330]
					}
				]
			};
		
		
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		</script>
	</body>
</html>
